<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 75vh;">
    <el-col>
      <el-card :model="form" shadow="always" style="background: transparent;">
        <span style="font-size: 20px">个人信息</span>
        <div style="margin-top: 20px" @click="updateImg()">
          <el-avatar :size="150" :src="'http://localhost:8080/yyj/files/'+this.user.avatar+ '?' + Date.now()"><el-link :underline="false">点击上传图片</el-link></el-avatar>
        </div>

        <el-descriptions :column="1" size=50 border style="margin-top: 20px;background: transparent;">
          <el-descriptions-item label="用户名">{{ form.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ form.sex }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ form.age }}</el-descriptions-item>
          <el-descriptions-item label="电话" >{{ form.phone }}</el-descriptions-item>
        </el-descriptions>

        <el-button type="primary" style="margin-top: 20px; margin-left: 1020px" @click="updateInfo(form)">修改信息
        </el-button>
      </el-card>
    </el-col>
    <!--更新图片的表单   -->
    <div>
      <el-dialog title="上传头像" :visible.sync="dialogUpdateImg" width="25%">
        <el-upload action="http://localhost:8080/yyj/files/upload" list-type="picture-card" :show-file-list="true"
                   :on-success="successUpload" :on-remove="handleRemove" :limit="1 ">
          <i class="el-icon-plus"></i>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdateImg = false">取 消</el-button>
          <el-button type="primary" @click="submitImg()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--更新信息的表单    -->
    <div>
      <el-dialog title="修改信息" :visible.sync="dialogUpdateInfo" width="30%">
        <el-form :model="this.newForm" label-width="50px">
          <el-form-item label="姓名">
            <el-input v-model="newForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" width="50%">
            <template>
              <el-radio v-model="newForm.sex" label="男">男</el-radio>
              <el-radio v-model="newForm.sex" label="女">女</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="newForm.age"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="newForm.phone"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dialogUpdateInfo = false">取 消</el-button>
          <el-button type="primary" @click="submitInfo()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "InfoView",

  data() {
    return {
      dialogUpdateInfo: false,
      dialogUpdateImg: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      form: {},
      newForm: {}
    }
  },

  created() {
    this.getInfo();
  },
  methods: {

    updateInfo(obj) {
      this.newForm = obj;
      this.dialogUpdateInfo = true;
      this.getInfo();
    },
    updateImg() {
      this.newForm=this.form
      this.dialogUpdateImg = true;
      this.getInfo();
    },
    submitInfo() {
      request.post("/user/updateInfo", this.newForm).then(res => {
        if (res.code === '0') {
          this.$message.success("操作成功");
          this.dialogUpdateInfo = false;
          localStorage.setItem('user', JSON.stringify(this.newForm));
          this.getInfo();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    successUpload(res) {
      this.newForm.avatar = res.data;

    },
    handleRemove() {

    },
    //更改用户照片
    submitImg() {
      request.post("/user/updateImg", this.newForm).then(res => {
        if (res.code === '0') {
          this.$message.success("操作成功");
          localStorage.setItem('user', JSON.stringify(this.newForm));
          this.dialogUpdateImg = false;
          //刷新解决了不同步的问题
          window.location.reload();
          // 重新获取用户信息以确保最新的图片URL被加载
          /*你修改信息要什么返回值传回来呀，蠢货*/
          this.getInfo();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getInfo() {
      request.get("/user/getInfo/"+this.user.userId).then(res=>{
        if (res.code === '0') {
          this.form = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    }

  }
}
</script>

<style scoped>

</style>